import React, { useEffect, useState } from 'react'
import styles from "../assets/styles/MyUserMenu.module.less"
import { useSelector,useDispatch } from "react-redux"
import { Link } from "react-router-dom"
import {MenuActionUpdateStatus} from "../redux/actions/MenuAction"

export default function MyUserMenu() {
    const { menus } = useSelector(state => {
        return state.MenuRD
    })
    const dispatch = useDispatch()
    const liCheckeEvent = (path) => {
        dispatch(MenuActionUpdateStatus({path}))
    }
    return (
        <div className={styles.wrapper}>
            <ul className={styles.box}>
                {menus.map(item => {
                    return <Link key={item.path} to={item.path}> <li onClick={()=>liCheckeEvent(item.path)} className={item.status ? styles.active : ""} >{item.title}</li></Link>
                })}
            </ul>
        </div>
    )
}
